import React,{Component} from 'react';
import {connect} from 'react-redux';
import {saveName} from './../action/auth';
import {hashHistory} from 'react-router';
import {getCarts,saveUserId} from './../action/product';
import { Notification } from 'element-react';
import axios from 'axios';

class LoginContext extends Component{
    state={
        name:'',
        password:''
    }
    
    handleChange(e) {
        this.setState({name: e.target.value});
    }
    handleChangePass(e){
        this.setState({password: e.target.value});
    }
    handleSubmit = (e) => {
        e.stopPropagation();
        e.preventDefault();
        console.log(this.props.location)
        if (this.state.name!==''&&this.state.password!=='') {
            axios({
                method:'post',
                url:'http://localhost:3000/users/login',
                data:this.state
              }).then(res=>{
                console.log(res)
                if(res.data.length>0 && res.data[0].name==this.state.name.trim() && res.data[0].password==this.state.password){
                    sessionStorage.setItem("loginUser", JSON.stringify({username:res.data[0].name,id:res.data[0]._id}));
                    // sessionStorage.setItem("picurl",res.data.picurl);
                    this.props.auth.fakeAuth.authenticate();
                    this.props.saveUserId(res.data[0]._id);
                    this.props.saveName(res.data[0].name);
                    this.props.getCarts(res.data[0]._id);
                    Notification({
                        title: '登录成功',
                        // message: '这是一条成功的提示消息',
                        type: 'success'
                    });
                    hashHistory.push('/home');
                    
                }else {
                    Notification.error({
                        title: '错误',
                        message:'用户名或密码错误!',
                        duration:1000
                    })
                }
            })
        }else{
            Notification.error({
                title: '错误',
                message: '用户名或密码为空！',
                duration:1000
            })
        }
    }

    render() { 
        return (
            <form className="form-signin" onSubmit={this.handleSubmit} style={{width:'400px',height:'350px',margin:'70px auto'}}>
                <h1 style={{textAlign:'center'}}>用  户  登  录</h1><br/>
                <h4 style={{textAlign:'center',color:'red'}}>{this.state.warning}</h4>
                <label htmlFor="username">用户名：</label>
                
                <input type="text" value={this.state.name} onChange={this.handleChange.bind(this)} className="form-control" placeholder="请输入用户名" />
                <br/>
                
                <label htmlFor="password">密码：</label>
                <input type="password" value={this.state.password} onChange={this.handleChangePass.bind(this)} className="form-control" placeholder="请输入密码"/>
                <br/>
                {/* <div class="checkbox">
                <label>
                    <input type="checkbox" value="remember-me"> Remember me
                </label>
                </div> */}
                <input className="btn btn-lg btn-primary btn-block" type="submit" value="登   录" />
            </form>
        )
    }
}




const getValue = (state)=>{
    return {
        auth:state.auth
    }
}

const Login = connect(getValue , {saveName,getCarts,saveUserId})(LoginContext);

export default Login;